<template>
  <div class="home-container">
    <!-- 顶部导航 -->
    <HomeNav />

    <!-- 轮播图 -->
    <div class="banner-section">
      <el-carousel height="450px" trigger="click" arrow="always" class="banner-carousel">
        <el-carousel-item v-for="item in banners" :key="item.id">
          <div class="banner-item">
            <img :src="item.imageUrl" :alt="item.title" class="banner-img">
            <div class="banner-content">
              <h3 class="banner-title">{{ item.title }}</h3>
              <p class="banner-desc">{{ item.description }}</p>
              <el-button type="danger" round size="large" class="banner-btn">立即抢购</el-button>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 公告栏 -->
    <div class="notice-bar">
      <div class="notice-content">
        <i class="iconfont icon-notice notice-icon"></i>
        <el-carousel 
          height="40px" 
          direction="vertical" 
          :autoplay="true" 
          indicator-position="none"
          class="notice-carousel"
        >
          <el-carousel-item v-for="(item, index) in notices" :key="index">
            <div class="notice-item">{{ item }}</div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>

    <!-- 秒杀时间段 -->
    <div class="time-slots">
      <div class="time-slots-header">
        <h2 class="section-title">
          <i class="iconfont icon-flash"></i>
          <span>限时秒杀</span>
        </h2>
        <div class="countdown" v-if="currentActivity">
          <span class="countdown-text">距结束还剩：</span>
          <div class="countdown-item">
            <span class="countdown-number">{{ countdown.hours }}</span>
            <span class="countdown-label">时</span>
          </div>
          <div class="countdown-item">
            <span class="countdown-number">{{ countdown.minutes }}</span>
            <span class="countdown-label">分</span>
          </div>
          <div class="countdown-item">
            <span class="countdown-number">{{ countdown.seconds }}</span>
            <span class="countdown-label">秒</span>
          </div>
        </div>
      </div>
      <div class="time-slots-content">
        <div 
          class="time-slot" 
          v-for="slot in timeSlots" 
          :key="slot.time"
          :class="{ active: slot.active }"
          @click="changeTimeSlot(slot)"
        >
          <div class="time">{{ slot.time }}</div>
          <div class="status">{{ slot.status }}</div>
          <div class="progress-bar" v-if="slot.active"></div>
        </div>
      </div>
    </div>

    <!-- 秒杀活动区 -->
    <div class="seckill-section">
      <div class="seckill-products">
        <el-row :gutter="20">
          <el-col :xl="6" :lg="6" :md="8" :sm="12" :xs="24" v-for="product in seckillProducts" :key="product.id">
            <seckill-product-card 
              :product="product"
              @view="viewDetail"
              @add-cart="addToCart"
              @seckill="handleSeckill"
            />
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 精选推荐 -->
    <div class="featured-section">
      <div class="section-header">
        <h2 class="section-title">
          <i class="iconfont icon-recommend"></i>
          <span>精选推荐</span>
        </h2>
        <el-button type="text" class="more-btn" @click="toCategory('recommend')">
          查看更多 <i class="iconfont icon-more"></i>
        </el-button>
      </div>
      <div class="featured-products">
        <el-row :gutter="20">
          <el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24" v-for="item in featuredProducts" :key="item.id">
            <featured-product-card 
              :product="item"
              @view="viewDetail"
              @add-cart="addToCart"
            />
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 品牌专区 -->
    <div class="brand-section">
      <div class="section-header">
        <h2 class="section-title">
          <i class="iconfont icon-brand"></i>
          <span>品牌专区</span>
        </h2>
      </div>
      <div class="brand-list">
        <div 
          class="brand-item" 
          v-for="brand in brands" 
          :key="brand.id"
          @click="toBrand(brand.id)"
        >
          <img :src="brand.logo" :alt="brand.name" class="brand-logo">
          <div class="brand-name">{{ brand.name }}</div>
        </div>
      </div>
    </div>

    <!-- 底部区域 -->
    <HomeFooter />

    <!-- 返回顶部 -->
    <el-backtop :right="50" :bottom="50" />

    <!-- 浮动工具栏 -->
    <div class="float-toolbar">
      <div class="tool-item" @click="toPay">
        <i class="iconfont icon-cart"></i>
        <el-badge :value="cartCount" :max="99" class="tool-badge" />
        <span class="tool-text">待支付</span>
      </div>
      <div class="tool-item" @click="toUserCenter">
        <i class="iconfont icon-user"></i>
        <span class="tool-text">我的</span>
      </div>
      <div class="tool-item" @click="openCustomerService">
        <i class="iconfont icon-service"></i>
        <span class="tool-text">客服</span>
      </div>
      <div class="tool-item" @click="openFeedback">
        <i class="iconfont icon-feedback"></i>
        <span class="tool-text">反馈</span>
      </div>
      <div class="tool-item" @click="scrollToTop">
        <i class="iconfont icon-top"></i>
        <span class="tool-text">顶部</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import SeckillProductCard from '@/components/SeckillProductCard.vue'
import FeaturedProductCard from '@/components/FeaturedProductCard.vue'
import HomeNav from '@/components/layout/HomeNav.vue';
import HomeFooter from '@/components/layout/HomeFooter.vue';

const router = useRouter()
const searchKeyword = ref('')
const isLogin = ref(true) // 根据实际登录状态修改
const cartCount = ref(5) // 购物车数量
const currentActivity = ref(null)
const countdown = ref({ hours: '00', minutes: '00', seconds: '00' })
// const currentIndex = ref(0)

// 模拟数据
const banners = ref([
  { 
    id: 1, 
    imageUrl: require('@/assets/imgs/lunbo/001.jpg'), 
    title: '618大促狂欢节', 
    description: '全场低至5折，爆款秒杀1元起' 
  },
  { 
    id: 2, 
    imageUrl: require('@/assets/imgs/lunbo/002.jpg'), 
    title: '家电专场', 
    description: '家电满3000减300，以旧换新更优惠' 
  },
  { 
    id: 3, 
    imageUrl: require('@/assets/imgs/lunbo/003.jpg'), 
    title: '数码新品', 
    description: '新品首发，限时特惠' 
  }
])

const notices = ref([
  '【公告】618大促活动即将开始，敬请期待！',
  '【优惠】新用户注册即送100元优惠券',
  '【通知】系统将于6月1日凌晨进行维护升级',
  '【活动】分享商品得积分，积分可兑换礼品'
])

const seckillProducts = ref([
  {
    id: 1,
    name: '康佳(KONKA)580升 对开门冰箱',
    imageUrl: require('@/assets/imgs/goods/goods01.png'),
    seckillPrice: 1899,
    originalPrice: 2499,
    progress: 70,
    sold: 235,
    stock: 65,
    hot: true,
    showHover: false
  },
  {
    id: 2,
    name: '小米(MI)Redmi K60 5G手机',
    imageUrl: require('@/assets/imgs/goods/goods02.jpg.avif'),
    seckillPrice: 1999,
    originalPrice: 2699,
    progress: 85,
    sold: 312,
    stock: 88,
    hot: true,
    showHover: true
  },
  {
    id: 3,
    name: '戴尔(DELL)27英寸 2K显示器',
    imageUrl: require('@/assets/imgs/goods/goods03.jpg.avif'),
    seckillPrice: 1299,
    originalPrice: 1699,
    progress: 60,
    sold: 180,
    stock: 120,
    showHover: false
  },
  {
    id: 4,
    name: '美的(Midea)1.5匹 变频空调',
    imageUrl: require('@/assets/imgs/goods/goods02.jpg.avif'),
    seckillPrice: 2199,
    originalPrice: 2899,
    progress: 45,
    sold: 135,
    stock: 165,
    showHover: false
  },
  {
    id: 5,
    name: '华为(HUAWEI)Watch GT3 智能手表',
    imageUrl: require('@/assets/imgs/goods/goods02.jpg.avif'),
    seckillPrice: 899,
    originalPrice: 1299,
    progress: 90,
    sold: 270,
    stock: 30,
    hot: true,
    showHover: false
  },
  {
    id: 6,
    name: '联想(Lenovo)小新Pro16 笔记本电脑',
    imageUrl: require('@/assets/imgs/goods/goods02.jpg.avif'),
    seckillPrice: 5499,
    originalPrice: 6299,
    progress: 30,
    sold: 90,
    stock: 210,
    showHover: false
  },
  {
    id: 7,
    name: '索尼(SONY)PS5 PlayStation5游戏机',
    imageUrl: require('@/assets/imgs/goods/goods02.jpg.avif'),
    seckillPrice: 3499,
    originalPrice: 4299,
    progress: 75,
    sold: 225,
    stock: 75,
    hot: true,
    showHover: false
  },
  {
    id: 8,
    name: '苹果(Apple)AirPods Pro 2代',
    imageUrl: require('@/assets/imgs/goods/goods02.jpg.avif'),
    seckillPrice: 1499,
    originalPrice: 1899,
    progress: 65,
    sold: 195,
    stock: 105,
    showHover: false
  }
])

// 分类数据
const categories = ref([
  { id: '1', name: '手机数码', icon: 'icon-phone' },
  { id: '2', name: '家用电器', icon: 'icon-appliance' },
  { id: '3', name: '电脑办公', icon: 'icon-computer' },
  { id: '4', name: '生活百货', icon: 'icon-daily' },
  { id: '5', name: '运动户外', icon: 'icon-sport' },
  { id: '6', name: '美妆个护', icon: 'icon-beauty' },
  { id: '7', name: '食品生鲜', icon: 'icon-food' },
  { id: '8', name: '母婴玩具', icon: 'icon-baby' }
])
const activeCategory = ref('1')

// 时间段数据
const timeSlots = ref([
  { time: '08:00', status: '已结束', active: false },
  { time: '10:00', status: '疯抢中', active: true },
  { time: '12:00', status: '即将开始', active: false },
  { time: '14:00', status: '即将开始', active: false },
  { time: '16:00', status: '即将开始', active: false },
  { time: '18:00', status: '即将开始', active: false },
  { time: '20:00', status: '即将开始', active: false },
  { time: '22:00', status: '即将开始', active: false }
])

// 精选推荐数据
const featuredProducts = ref([
  {
    id: 1,
    name: 'HUAWEI Mate X6 12GB+256GB 折叠屏手机',
    description: '超薄折叠屏手机，支持5G网络，120Hz刷新率',
    price: 12999,
    originalPrice: 13999,
    imageUrl: require('@/assets/imgs/goods/jx001.jpg'),
    rating: 4.8,
    showHover: false
  },
  {
    id: 2,
    name: 'iPhone 14 Pro Max 256GB 暗夜紫',
    description: 'A16仿生芯片，4800万像素主摄，灵动岛设计',
    price: 9899,
    originalPrice: 10499,
    imageUrl: require('@/assets/imgs/goods/jx002.jpg.avif'),
    rating: 4.9,
    showHover: false
  },
  {
    id: 3,
    name: '索尼(SONY)Alpha 7 IV 全画幅微单相机',
    description: '3300万像素，4K 60p视频拍摄，实时眼部对焦',
    price: 16999,
    originalPrice: 17999,
    imageUrl: require('@/assets/imgs/goods/jx002.jpg.avif'),
    rating: 4.7,
    showHover: false
  },
  {
    id: 4,
    name: '戴尔(DELL)XPS 15 9520 设计师笔记本',
    description: '15.6英寸4K触控屏，12代i7处理器，RTX3050Ti',
    price: 14999,
    originalPrice: 15999,
    imageUrl: require('@/assets/imgs/goods/jx002.jpg.avif'),
    rating: 4.6,
    showHover: false
  }
])

// 品牌数据
const brands = ref([
  { id: 1, name: 'Apple', logo: require('@/assets/imgs/brands/huawei.png') },
  { id: 2, name: 'HUAWEI', logo: require('@/assets/imgs/brands/huawei.png') },
  { id: 3, name: '小米', logo: require('@/assets/imgs/brands/huawei.png') },
  { id: 4, name: 'OPPO', logo: require('@/assets/imgs/brands/huawei.png') },
  { id: 5, name: 'VIVO', logo: require('@/assets/imgs/brands/huawei.png') },
  { id: 6, name: 'SONY', logo: require('@/assets/imgs/brands/huawei.png') },
  { id: 7, name: '联想', logo: require('@/assets/imgs/brands/huawei.png') },
  { id: 8, name: '戴尔', logo: require('@/assets/imgs/brands/huawei.png') }
])



// 搜索处理
const handleSearch = () => {
  if (!searchKeyword.value.trim()) {
    ElMessage.warning('请输入搜索关键词')
    return
  }
  router.push(`/search?keyword=${searchKeyword.value}`)
}

// 秒杀处理
const handleSeckill = (productId) => {
  if (!isLogin.value) {
    ElMessage.warning('请先登录')
    router.push('/login')
    return
  }
  ElMessage.success('抢购成功！')
}

// 查看详情
const viewDetail = (productId) => {
  router.push(`/seckill/${productId}`)
}

// 支付订单列表
const toPay = () => {
  router.push('/seckill/orders')
}

// 去品牌页
const toBrand = (brandId) => {
  router.push(`/brand/${brandId}`)
}

// 去分类页
const toCategory = (categoryId) => {
  router.push(`/category/${categoryId}`)
}

// 格式化进度条文字
const format = (percentage) => {
  return `已抢${percentage}%`
}

// 导航方法
const toUserCenter = () => router.push('/user')
const toLogin = () => router.push('/login')

// 分类切换
const changeCategory = (categoryId) => {
  activeCategory.value = categoryId
  // TODO: 加载对应分类的商品
}

// 时间段切换
const changeTimeSlot = (slot) => {
  timeSlots.value.forEach(item => item.active = false)
  slot.active = true
  // TODO: 加载对应时间段的商品
}

// 倒计时更新
const updateCountdown = () => {
  const timer = setInterval(() => {
    const now = new Date()
    const end = new Date(now)
    end.setHours(12, 0, 0, 0) // 当前时间段结束时间为12:00
    
    // 如果当前时间已超过12:00，则设置为下一个时间段的结束时间
    if (now > end) {
      end.setHours(14, 0, 0, 0)
    }
    
    const diff = end - now
    
    const hours = Math.floor(diff / (1000 * 60 * 60))
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
    const seconds = Math.floor((diff % (1000 * 60)) / 1000)
    
    countdown.value = {
      hours: hours.toString().padStart(2, '0'),
      minutes: minutes.toString().padStart(2, '0'),
      seconds: seconds.toString().padStart(2, '0')
    }
  }, 1000)

  onUnmounted(() => clearInterval(timer))
}

onMounted(() => {
  // 初始化数据
  updateCountdown()
})

// 退出登录
const handleLogout = () => {
  isLogin.value = false
  ElMessage.success('退出成功')
  router.push('/login')
}

// 工具栏方法
const openCustomerService = () => {
  // 实现在线客服功能
  ElMessage.info('正在接入在线客服...')
}

const openFeedback = () => {
  // 实现意见反馈功能
  ElMessage.info('正在打开反馈页面...')
}

const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
}
</script>

<style lang="scss" scoped>
.home-container {
  min-width: 1200px;
  background-color: #f5f5f5;

  

  .category-nav {
    margin-top: 60px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    
    .category-content {
      max-width: 1200px;
      margin: 0 auto;
      
      .category-menu {
        display: flex;
        justify-content: center;
        border: none;
        
        .el-menu-item {
          font-size: 16px;
          
          &:hover, &.is-active {
            color: #ff4d4f;
            border-bottom-color: #ff4d4f;
          }

          .iconfont {
            margin-right: 4px;
            font-size: 18px;
          }
        }
      }
    }
  }

  .banner-section {
    margin: 20px auto;
    max-width: 1200px;

    .banner-carousel {
      border-radius: 8px;
      overflow: hidden;
      
      .banner-item {
        position: relative;
        height: 100%;

        .banner-img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .banner-content {
          position: absolute;
          left: 50px;
          bottom: 50px;
          color: #fff;
          text-shadow: 0 2px 4px rgba(0,0,0,0.3);

          .banner-title {
            font-size: 32px;
            margin-bottom: 10px;
          }

          .banner-desc {
            font-size: 18px;
            margin-bottom: 20px;
          }

          .banner-btn {
            padding: 12px 30px;
            font-size: 16px;
          }
        }
      }
    }
  }

  .notice-bar {
    max-width: 1200px;
    margin: 20px auto;
    background: #fff;
    border-radius: 4px;
    padding: 0 20px;
    height: 40px;
    
    .notice-content {
      display: flex;
      align-items: center;
      height: 100%;

      .notice-icon {
        color: #ff4d4f;
        font-size: 20px;
        margin-right: 10px;
      }

      .notice-carousel {
        flex: 1;
        
        .notice-item {
          color: #666;
          font-size: 14px;
          line-height: 40px;
        }
      }
    }
  }

  .time-slots {
    max-width: 1200px;
    margin: 30px auto;
    background: #fff;
    border-radius: 8px;
    padding: 20px;

    .time-slots-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding: 0 10px;

      .section-title {
        display: flex;
        align-items: center;
        font-size: 20px;
        color: #333;

        .iconfont {
          color: #ff4d4f;
          margin-right: 8px;
          font-size: 24px;
        }
      }

      .countdown {
        display: flex;
        align-items: center;
        
        .countdown-text {
          margin-right: 10px;
          color: #666;
        }

        .countdown-item {
          background: #333;
          color: #fff;
          padding: 4px 8px;
          border-radius: 4px;
          margin: 0 4px;

          .countdown-number {
            font-size: 18px;
            font-weight: bold;
          }

          .countdown-label {
            font-size: 12px;
            margin-left: 2px;
          }
        }
      }
    }

    .time-slots-content {
      display: flex;
      gap: 10px;

      .time-slot {
        flex: 1;
        text-align: center;
        padding: 15px 10px;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s;
        background: #f8f8f8;
        border: 1px solid #eee;
        position: relative;
        overflow: hidden;
        
        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        &.active {
          background: #ff4d4f;
          color: white;
          border-color: #ff4d4f;

          .progress-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 2px;
            background: rgba(255,255,255,0.3);
            animation: progress 2s linear infinite;
          }
        }
        
        .time {
          font-size: 20px;
          font-weight: bold;
          margin-bottom: 5px;
        }
        
        .status {
          font-size: 14px;
          opacity: 0.8;
        }
      }
    }
  }

  .seckill-section {
    max-width: 1200px;
    margin: 0 auto 40px;
  }

  .featured-section, .brand-section {
    max-width: 1200px;
    margin: 40px auto;
    background: #fff;
    border-radius: 8px;
    padding: 20px;

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding: 0 10px;

      .section-title {
        display: flex;
        align-items: center;
        font-size: 20px;
        color: #333;

        .iconfont {
          color: #ff4d4f;
          margin-right: 8px;
          font-size: 24px;
        }
      }

      .more-btn {
        color: #666;
        
        .iconfont {
          margin-left: 4px;
        }
      }
    }
  }

  .brand-section {
    .brand-list {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 20px;

      .brand-item {
        text-align: center;
        cursor: pointer;
        padding: 10px;
        border: 1px solid #eee;
        border-radius: 4px;
        transition: all 0.3s;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .brand-logo {
          width: 80px;
          height: 40px;
          object-fit: contain;
          margin-bottom: 8px;
        }

        .brand-name {
          font-size: 14px;
          color: #666;
        }
      }
    }
  }

  .footer-nav {
    background: #fff;
    padding: 40px 0;
    margin-top: 40px;

    .footer-content {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;

      .footer-links {
        display: flex;
        gap: 60px;

        .link-group {
          .link-title {
            font-size: 16px;
            color: #333;
            margin-bottom: 15px;
          }

          .link-list {
            li {
              margin-bottom: 10px;
              
              a {
                color: #666;
                text-decoration: none;
                font-size: 14px;
                
                &:hover {
                  color: #ff4d4f;
                }
              }
            }
          }
        }
      }

      .footer-contact {
        display: flex;
        gap: 40px;

        .contact-info {
          h3 {
            font-size: 16px;
            color: #333;
            margin-bottom: 15px;
          }

          p {
            color: #666;
            font-size: 14px;
            margin-bottom: 10px;

            .iconfont {
              margin-right: 5px;
              color: #999;
            }
          }
        }

        .qrcode {
          text-align: center;
          
          img {
            width: 120px;
            height: 120px;
            margin-bottom: 8px;
          }

          p {
            font-size: 14px;
            color: #666;
          }
        }
      }
    }
  }

  .copyright {
    background: #f8f8f8;
    text-align: center;
    padding: 20px 0;
    color: #999;
    font-size: 14px;
  }

  @keyframes progress {
    from { width: 0; }
    to { width: 100%; }
  }

  .featured-section {
    .featured-products {
      .featured-item {
        position: relative;
        border-radius: 8px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 2px 12px rgba(0,0,0,0.1);
        transition: all 0.3s;
        height: 100%;

        &:hover {
          transform: translateY(-5px);
        }

        .featured-img {
          width: 100%;
          height: 240px;
          object-fit: cover;
          border-radius: 8px 8px 0 0;
        }

        .item-info {
          padding: 15px;

          .item-title {
            font-size: 16px;
            color: #333;
            margin-bottom: 8px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            height: 40px;
            line-height: 20px;
          }

          .item-desc {
            color: #666;
            font-size: 14px;
            margin: 8px 0;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            height: 40px;
            line-height: 20px;
          }

          .item-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;

            .item-price {
              .current-price {
                color: #ff4d4f;
                font-size: 20px;
                font-weight: bold;
                margin-right: 8px;
              }

              .original-price {
                color: #999;
                text-decoration: line-through;
                font-size: 14px;
              }
            }
          }
        }

        .item-hover {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0,0,0,0.5);
          display: flex;
          align-items: center;
          justify-content: center;
          opacity: 0;
          transition: opacity 0.3s;

          &:hover {
            opacity: 1;
          }

          .hover-content {
            display: flex;
            flex-direction: column;
            gap: 10px;
            
            .el-button {
              padding: 12px 24px;
            }
          }
        }
      }
    }
  }

  .float-toolbar {
    position: fixed;
    right: 20px;
    bottom: 100px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 15px;

    .tool-item {
      width: 50px;
      height: 50px;
      background: #fff;
      border-radius: 25px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      position: relative;
      transition: all 0.3s;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);

      &:hover {
        transform: translateX(-5px);
        background: #ff4d4f;
        
        .iconfont, .tool-text {
          color: #fff;
        }
      }

      .iconfont {
        font-size: 24px;
        color: #666;
        transition: color 0.3s;
      }

      .tool-badge {
        position: absolute;
        top: -5px;
        right: -5px;
      }

      .tool-text {
        font-size: 12px;
        color: #666;
        margin-top: 2px;
        transition: color 0.3s;
      }
    }
  }

  // 响应式布局优化
  @media screen and (max-width: 768px) {
    .home-container {
      .nav-header {
        position: static;
        
        .nav-content {
          padding: 10px;
          
          .logo {
            justify-content: center;
            margin-bottom: 10px;
          }
          
          .search-box {
            order: 3;
            width: 100%;
            margin: 10px 0;
          }
          
          .user-actions {
            order: 2;
            position: absolute;
            right: 10px;
            top: 10px;
          }
        }
      }

      .category-nav {
        margin-top: 0;
        overflow-x: auto;
        
        .category-menu {
          flex-wrap: nowrap;
          justify-content: flex-start;
          padding: 0 10px;
          
          .el-menu-item {
            flex: 0 0 auto;
          }
        }
      }

      .float-toolbar {
        bottom: 60px;
        right: 10px;
        
        .tool-item {
          width: 40px;
          height: 40px;
          
          .iconfont {
            font-size: 20px;
          }
          
          .tool-text {
            display: none;
          }
        }
      }

      .seckill-section, 
      .featured-section,
      .brand-section {
        margin: 10px;
        padding: 10px;
      }

      .footer-nav {
        .footer-content {
          flex-direction: column;
          padding: 0 20px;
          
          .footer-links {
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 30px;
          }
        }
      }
    }
  }
}
</style>
